<template>
  <div class="user-edit all-height">
    <!-- Drawer抽屉 -->
    <!-- <Drawer
        :title="title"
        v-model="visible"
        width="720"
        draggable
        :mask-closable="type == '0'"
    > -->
      <div :style="{ maxHeight: maxHeight }" class="drawer-content all-height">
        <div class="drawer-header">
          <div class="cmr16"  v-show="type == '2'">添加区</div>
          <div class="cmr16"  v-show="type != '2'">编辑区</div>
          <!-- <Avatar :src="form.avatar" size="large" v-show="type != '2'"/> -->
        </div>
        <Form label-colon v-show="type != '2'" label-position="right" :label-width="labelWidth80" class="marginForm">
          <Row :gutter="32">
            <Col span="24">
              <FormItem label="账号" class="box-user">
                {{ form.username }}
                <Tooltip trigger="hover" placement="right" content="账户已禁用">
                  <Icon
                      v-show="form.status == -1"
                      type="md-lock"
                      size="18"
                      class="cml10"
                      style="cursor: pointer"
                  />
                </Tooltip>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <Form
            ref="form"
            :model="form"
            :rules="formValidate"
            label-position="right"
            :label-width="labelWidth80"
        >
          <Row :gutter="32" v-if="type == '2'">
            <Col span="24">
              <FormItem label="账号" prop="username">
                <Input
                    v-model="form.username"
                    autocomplete="off"
                    maxlength="16"
                />
                <input type="text" style="position: fixed;z-index: -10000;width: 0;border: none"></input>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="密码" prop="password">
                <SetPassword v-model="form.password" @on-change="changePass"/>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="24">
              <FormItem label="姓名" prop="name" label-position="right">
                <Input v-model="form.name" maxlength="16"/>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="单位名称" prop="unitname">
                <Input v-model="form.unitname" clearable maxlength="50"/>
              </FormItem>
            </Col>

          </Row>
          <Row :gutter="32">
            <Col span="24">
              <FormItem label="所属部门" class="form-noheight">
                <department-tree-choose
                    @on-change="handleSelectDepTree"
                    ref="depTree"
                ></department-tree-choose>
              </FormItem>
            </Col>

            <Col span="24">
              <FormItem label="角色" prop="roleIds">
                <Select v-model="form.roleIds" multiple transfer>
                  <Option
                      v-for="item in roleList"
                      :value="item.id"
                      :key="item.id"
                      :label="item.description"
                  >
                    <span class="cmr10" >{{ item.name }}</span>
                    <span style="color: #ccc">{{ item.description }}</span>
                  </Option>
                </Select>
              </FormItem>
            </Col>

          </Row>
          <Row :gutter="32">
            <Col span="24">
              <FormItem label="职务" prop="zw">
                <Input v-model="form.zw" clearable maxlength="50"/>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="电话" prop="telephone">
                <Input v-model="form.telephone" clearable maxlength="50"/>
              </FormItem>
            </Col>

            <!--            <Col span="24">-->
            <!--              <FormItem label="头像" class="form-noheight">-->
            <!--                <upload-pic-input v-model="form.avatar"></upload-pic-input>-->
            <!--              </FormItem>-->
            <!--            </Col>-->
          </Row>
          <Row :gutter="32">
            <Col span="24">
              <FormItem label="手机号" prop="mobile">
                <Input v-model="form.mobile" maxlength="20"/>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="传真" prop="fax">
                <Input v-model="form.fax" clearable maxlength="50"/>
              </FormItem>
            </Col>
          </Row>

          <Row :gutter="32">
            <Col span="24">
              <FormItem label="邮箱">
                <!--              <FormItem label="邮箱" prop="email">-->
                <Input v-model="form.email" transfer maxlength="50"/>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="QQ" prop="qq">
                <Input v-model="form.qq" clearable maxlength="50"/>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="24">
              <FormItem label="排序值" prop="sortOrder">
                <Tooltip
                    trigger="hover"
                    placement="right"
                    content="值越小越靠前，支持小数"
                >
                  <InputNumber
                      :max="1000"
                      :min="0"
                      v-model="form.sortorder"
                  ></InputNumber>
                </Tooltip>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <!-- drawer-footer -->
      <div class="br right-bottom-edit">
        <Button type="text" @click="cancel">取消</Button>

        <div v-if="type == '1'"  style="display: inline;">
          <Button v-has="'edit'" type="primary" :loading="submitLoading" @click="submit">提交</Button>
        </div>
        <div v-if="type == '2'"  style="display: inline;">
          <Button v-has="'add'" type="primary" :loading="submitLoading" @click="submit">提交</Button>
        </div>
      </div>
    <!-- </Drawer> -->
  </div>
</template>

<script>
import {addProvicePersonInfo, editProvicePersonInfo} from "@/api/bys/personInfo/provice";
import {getRoles} from "@/api/index";
import {
  validateUsername,
  validateMobileNoBt,
  validatePassword,
} from "@/libs/validate";
import departmentTreeChoose from "@/views/my-components/xboot/department-tree-choose";
import uploadPicInput from "@/views/my-components/xboot/upload-pic-input";
import SetPassword from "@/views/my-components/xboot/set-password";
import dict from "@/views/my-components/xboot/dict";

export default {
  name: "user",
  components: {
    departmentTreeChoose,
    uploadPicInput,
    SetPassword,
    dict,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },
    type: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      labelWidth80: 80,
      roleList: [],
      visible: this.value,
      title: "",
      passColor: "",
      submitLoading: false,
      maxHeight: 510,
      form: {
        type: 0,
        address: [],
      },
      formValidate: {
        // 表单验证规则
        username: [
          {required: true, message: "请输入账号", trigger: "change"},
          {validator: validateUsername, trigger: "change"},
        ],
        name: [
          {required: true, message: "请输入姓名", trigger: "change"},
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {validator: validatePassword, trigger: "blur"},
        ],
        mobile: [
          // { required: true, message: "请输入手机号", trigger: "change" },
          { validator: validateMobileNoBt, trigger: "change" },
        ],
        email: [
          // { required: true, message: "请输入邮箱地址" },
          { type: "email", message: "邮箱格式不正确" },
        ]

      },
    };
  },
  methods: {
    init() {
      this.getRoleList();
    },
    getRoleList() {
      // getRoles({level:"provice"}).then((res) => {
      //   if (res.success) {
      //     this.roleList = res.result;
      //   }
      // });
      getRoles({level:"admin"}).then((res) => {
        if (res.success) {
          this.roleList = res.result;
          this.roleList.shift();
        }
      });
    },
    handleSelectDepTree(v) {
      this.form.departmentid = v;
      this.form.departmenttitle = this.$refs.depTree.departmentTitle;
    },
    changePass(v, grade, strength) {
      this.form.passStrength = strength;
      this.form.password = v
    },
    submit() {

      this.$refs.form.validate((valid) => {
        if (!this.form.sortorder){
          this.form.sortorder = 1
        }
        if (valid) {
          // this.form.mobile = this.getMockMobile();
          if (typeof this.form.birth == "object") {
            this.form.birth = this.format(this.form.birth, "yyyy-MM-dd");
          }
          if (this.type == "1") {
            // 编辑
            this.submitLoading = true;
            editProvicePersonInfo(this.form).then((res) => {
              this.submitLoading = false;

              if (res.success) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
                this.cancel();
              }
            });
          } else {
            // 添加
            this.submitLoading = true;
            console.log(this.form, "kkk")
            addProvicePersonInfo(this.form).then((res) => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
                this.cancel();
              }
            });
          }
        }
      });
    },
    cancel(){
      this.$emit("open-search", true);
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      if (this.type == "1") {
        this.title = "编辑用户";
        this.maxHeight =
            Number(document.documentElement.clientHeight - 121) + "px";
      } else if (this.type == "2") {
        this.title = "添加用户";
        this.maxHeight =
            Number(document.documentElement.clientHeight - 121) + "px";
      } else {
        this.title = "用户详情";
        this.maxHeight = "100%";
      }
      // 清空数据
      this.$refs.form.resetFields();
      if (this.type == "0" || this.type == "1") {
        // 回显数据
        let data = this.data;
        // 部门
        this.$refs.depTree.setData(data.departmentid, data.departmenttitle);
        // 角色
        let selectRolesId = [];
        if (data.roles) {
          data.roles.forEach(function (e) {
            selectRolesId.push(e.id);
          });
        }
        data.roleIds = selectRolesId;
        delete data.roles;
        delete data.permissions;
        // 密码强度
        if (data.passStrength == "弱") {
          this.passColor = "#ed3f14";
        } else if (data.passStrength == "中") {
          this.passColor = "#faad14";
        } else if (data.passStrength == "强") {
          this.passColor = "#52c41a";
        }
        // 回显
        this.form = data;

      } else {
        // // 添加
        // this.$refs.depTree.setData("", "");
        // this.form = {
        //   type: 0,
        //   sex: "",
        //   address: [],
        // };
      }
      this.visible = value;
    },
    // 生成假手机号
    getMockMobile() {
      const mobilePrefix = "152";
      let mobileSuffix = "";
      for (let i = 0; i < 8; i++) {
        mobileSuffix += Math.floor(Math.random() * 10);
      }
      // console.log(mobilePrefix + mobileSuffix);
      return mobilePrefix + mobileSuffix;
    },
    onRestWindow() {
        this.labelWidth80 = this.searchLabelWidth(this.labelWidth80)
    }
  },
  watch: {
    data(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      // if(value){
      //   this.form={}
      // }
      this.$emit("input", value);
    },
  },
  mounted() {
    this.onRestWindow()
    window.addEventListener('resize',this.onRestWindow)
    this.init();
  },
  beforeDestroy() {
      window.removeEventListener('resize',this.onRestWindow)
  }
};
</script>

<style lang="less">
@import "../../../styles/drawer-common.less";
@import "../../personInfo.less";

.ivu-input-prefix{
  top: 0.03rem;
}
</style>
<style lang="less" scoped>
/deep/ .ivu-table-body {
    // height: 90.6% !important;
}
/deep/ .ivu-table-header {
    overflow-y: scroll;
}
/deep/ .ivu-table {
    .ivu-table-body {
        overflow-y: scroll;
        // height: 88.5% !important;
    }
}

// 重构样式
/deep/ .ivu-form-item-label{
    display: flex;
    justify-content: right;
    width: 150px !important;
}
/deep/ .ivu-form-item {
    width: 100%;
    margin-bottom: 0.1rem;
    margin-right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/deep/ .ivu-form-item-content {
    width: 100% !important;
    margin-left: 0 ! important;
}
/deep/ .ivu-select {
    width: 100% !important;
}
/deep/ .ivu-date-picker {
    width: 100% !important;
}
/deep/ .br {
    margin-top: 15px;
    bottom: 0.12rem !important;
    .ivu-form-item-content {
        display: flex;
    }
}
/deep/ .ivu-input-type-textarea,/deep/ .ivu-input {
    height: calc(100% - 7px) !important;
}
.flex-1 {
    height: 100%;
}
/deep/ .ivu-drawer-body {
    overflow: hidden;
    .d-flex-align-center {
        height: fit-content !important;
        margin-left: 0 !important;
        justify-content: right;
        box-sizing: border-box;
        padding-right: 7px;
    }
}
.box-key {
    /deep/ .ivu-form-item-content {
        margin-left: 100px !important;
    }
}
/deep/ .ivu-tooltip {
  width: 100%;
  .ivu-tooltip-rel {
      width: 100%;
    .ivu-input-number  {
      width: 100%;
    }
  }
}
.box-user {
  /deep/ .ivu-form-item-content {
    display: flex;
  }
}
</style>
<style lang="less" scoped>
.cmr16{
    margin-right: 16px
}
.cml10 {
  margin-left: 10px;
}
.cmr10 {
  margin-right: 10px
}
</style>